<template>
  <div v-loading="pageLoading" class="gl_contentBox gl_heightFull">
    <template v-if="isShowDefault">
      <el-tabs v-model="activeName">
        <template v-for="item in optList">
          <el-tab-pane :key="item.code" :name="item.code" :label="item.name">
            <component :is="item.component" v-if="item.code === activeName" :id="defaultOrganization.id" />
          </el-tab-pane>
        </template>
      </el-tabs>
    </template>
    <template v-else>
      <component :is="roles" v-if="!pageLoading" />
    </template>
  </div>
</template>
<script>
import { api_GET_RolesDefaultOrganizationUnit } from '@/extend/api/swaggerApi/identity';
import roles from './roles';
import defaultRoles from './defaultRoles';
export default {
  data() {
    return {
      roles: roles,
      pageLoading: false,
      defaultOrganization: {},
      activeName: 'roles',
      optList: [
        {
          code: 'roles',
          name: '角色列表',
          component: roles
        },
        {
          code: 'defaultRoles',
          name: '通用角色列表',
          component: defaultRoles
        }
      ]
    };
  },
  computed: {
    isShowDefault: function() {
      return this.defaultOrganization.typeCode === 'WXCenter' || this.defaultOrganization.typeCode === 'ProvinceTA';
    }
  },
  created() {
    this.getDefaultOrganization();
  },
  methods: {
    // 获取当前用户默认管理的通用角色所属机构
    getDefaultOrganization() {
      this.pageLoading = true;
      api_GET_RolesDefaultOrganizationUnit().then(res => {
        this.defaultOrganization = res || {};
        console.log(res);
        this.pageLoading = false;
      }, error => {
        this.$message({ type: 'error', message: (error.error && error.error.message || '') });
        this.pageLoading = false;
      });
    }
  }
};
</script>
